/* eslint-disable react/prop-types */
import { useState,useEffect } from 'react';
import {Modal ,Button,Input,Table} from 'antd'
import {GetMenu} from '@/api/index'
import dayjs from 'dayjs'
// showEditStaff ->isOpen
// staff->data
// staffData ->editData
// setStaffData->setEditData
// 解构props isOpen 是否显示打开，staff被编辑的用户信息，onOk确定回调，onCancel取消回调
function EditStaff({title,isOpen,data,onOk,onCancel}) {
  // 把传入的staff作为当前editData的默认值
  const [editData,setEditData] = useState(data);
  // 用户权限（菜单）
  const [menus,setMenus] = useState([])
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  // 监听staff变化，更新editData的值（使用dayjs格式文本）
  useEffect(()=>{
    // 格式日期
    console.log("data",data);
    setEditData({...data,lastTime:dayjs(data.lastTime).format("YYYY-MM-DD HH:mm:ss")})
    // data&&data.permission&&data.permission.split(',')
    // 把拿到的用户权split字符串分割为数组.map数组的每个元素去掉空格*1转换为数字
    setSelectedRowKeys(data?.permission?.split(',').map(item=>item.trim()*1)||[]);
    // 获取菜单
    getMenu();
  },[data])
  function getMenu(){
    GetMenu({size:1000})
    .then(res=>{
      setMenus(res.data.list);
    })
  }
  // 表格列定义
 const columns = [
  {title:'权限',dataIndex:"name",key:"name"}
 ]
//  定义选择的表格


 const onSelectChange = (newSelectedRowKeys) => {
  // 当选择发生变化时候
  // console.log('selectedRowKeys changed: ', newSelectedRowKeys);
  // 更新选择的key
  setSelectedRowKeys(newSelectedRowKeys);
  // 更新EditData(返回父组件的数据)
  setEditData({...editData,permission:newSelectedRowKeys.join(',')})
};
// 选择选项
const rowSelection = {
  // 选择的行
  selectedRowKeys,
  // 当选择发生变化时候
  onChange: onSelectChange,
};
  return (<Modal title={title} 
  footer={null}
  open={isOpen} 
  onCancel={onCancel}>
       <div>
          {/* {JSON.stringify(selectedRowKeys)} */}
         {/* id：<Input value={editData.id}  disabled/> <br /> */}
          角色名:<Input value={editData.name} onChange={e=>setEditData({...editData,name:e.target.value})}/>
          <div>权限：</div>
          {/* 定义表格，选择行，列表，数据源 */}
          <Table
           rowSelection={rowSelection} 
          columns={columns} 
          dataSource={menus} 
          rowKey="id"></Table>
          
       </div>
  <Button 
  type='primary'
  onClick={()=>{
    onOk(editData)    
  }}>确定</Button>
      </Modal> );
}

export default EditStaff;